<template>
    <div class="wrapper">
        <!-- <div>
            <el-button type="primary" style="margin:5vh auto;" @click="sendToParent">刷新数据</el-button>
        </div> -->
        <h2>参与活动类型占比</h2>
        <div ref="echart1" class="echart" :style="{width: '100vw', height:'80vw'}"></div>
        <h2>参与活动时间分布</h2>
        <div ref="echart2" class="echart" :style="{width: '100vw', height:'80vw'}"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
  export default {
    name: 'Statistics',
    components:{},
    props:{
        tableData: Array
    },
    data(){
      return {
        echart1: '',
        echart2: '',
        option1: {
            series: [
                {
                    type: 'pie',
                    data: [
                        {
                            value: 0,
                            name: "聚餐"
                        },
                        {
                            value: 0,
                            name: "学习"
                        },
                        {
                            value: 0,
                            name: "出游"
                        },
                        {
                            value: 0,
                            name: "其他"
                        }
                    ],
                    textStyle: {
                        fontSize: 32
                    }
                },  
            ]
        },
        option2: {
            xAxis: {
                type: 'category',
                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    type: 'line',
                    name: '参加数目',
                    data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    // label: {
                    //     show: true,
                    //     position: 'top',
                    //     textStyle: {
                    //         fontSize: 24
                    //     }
                    // },
                    
                }
            ]
        }
      }
    },
    created(){},
    mounted(){},
    activated(){},
    updated(){},
    methods:{
        // 这波封装简直搬起石头砸自己的脚，没获取到初始化的实例....后续的数据更新无法进行
        // echartInit (echart, option) {
        //     echarts.init(echart).setOption(option)
        // }
        refreshData () {
            this.tableData.forEach(one => {
            let id = 3 // 月份和下标对应关系记得减一
            if (one.tag == '聚餐') {
                id = 0
            } else if (one.tag == '学习') {
                id = 1
            } else if (one.tag == '出游') {
                id = 2
            }
                this.option1.series[0].data[id].value ++
                let month = Number.parseInt(one.beginTime.split('-')[1])
                this.option2.series[0].data[month - 1] ++ 
            })
            this.echart1 =  echarts.init(this.$refs.echart1)
            this.echart2 =  echarts.init(this.$refs.echart2)
            
            this.echart1.setOption(this.option1)
            this.echart2.setOption(this.option2)
        },
        sendToParent () {
            console.log(123123)
            this.$emit("refreshChild", this.refreshData)
        }
    },
    computed:{},
    watch:{
        tableData: {
            handler (newData, oldData) {
                this.refreshData()
            },
            deep: true
        }
    },
  }
</script>
<style scoped>
    
    .wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .echart {
      display: flex;
      justify-content: center;
    }
</style>